// import React, {useState} from "react";
// useEffect
import React, { useState } from "react";
import TaskList from "./page/Task/TaskList.tsx";
import CustomInput from "./page/Sreach/CustomInput.tsx";
import Titletext from "./page/Titletext/TitleText.tsx";
import MyWork from "@/components/my-work/my-work";
import MyCollection from "@/components/my-collection/my-collection";
import TimeLocal from "@/components/time-local/time-local";
/*import TimWord from "@/components/time-word/time-word";
import TimHand from "@/components/time-hand/time-hand";*/
import { RightClickMenu } from "./componts/componts.tsx";
import "./index.less";

// 切换数据

const Dashboard: React.FC = () => {
  const [timeType, setTimeType] = useState<string>("style1");
  const [MyCollectionType, setMyCollectionType] = useState<string>("list");
  const [MyWorksType, setMyWorksType] = useState<string>("list");
  // 我的收藏
  const MyCollections = [
    {
      key: "1",
      label: "1 X 1",
      action: () => CollectionType("init")
    },
    {
      key: "3",
      label: "2 X 2",
      action: () => {
        CollectionType("list");
      }
    }
  ];
  // 我的工作
  const MyWorks = [
    {
      key: "1",
      label: "1 X 1",
      action: () => MyWorksTypes("init")
    },
    {
      key: "3",
      label: "2 X 2",
      action: () => {
        MyWorksTypes("list");
      }
    }
  ];

  // 时间切换
  const times = [
    {
      key: "1",
      label: "白色模式",
      action: () => changeType("style2")
    },
    {
      key: "3",
      label: "蓝色模式",
      action: () => {
        changeType("style1");
      }
    }
  ];
  function changeType(type: string) {
    setTimeType(type);
  }
  function CollectionType(type: string) {
    setMyCollectionType(type);
  }
  function MyWorksTypes(type: string) {
    setMyWorksType(type);
  }
  return (
    <div className="dashboard-container">
      {/* 首页光斑背景 */}
      <div className="bg">
        <div className="color1" />
        <div className="color2" />
        <div className="color3" />
        <div className="color4" />
      </div>

      <div className="content">
        <Titletext
          title={[
            { name: "财务一体化", color: "#63B0FF" },
            { name: "数", color: "#A2E2FD" },
            { name: "字", color: "#7FE9F4" },
            { name: "平台", color: "#AC92ED" }
          ]}
        />
        <div style={{ marginTop: "28px" }}>
          <CustomInput placeholder="请输入关键字进行搜索" />
        </div>

        <div className="dashboardContainer">
          {/*<div className="item">
            <TimHand type="style1" />
          </div>
          <div className="item">
            <TimHand type="style2" />
          </div>
          <div className="item">
            <TimWord type="style1" />
          </div>
          <div className="item">
            <TimWord type="style2" />
          </div>
          */}
          {/* <div className="item">
            <TimeLocal type="style2" />
          </div>*/}
          {/*className="item"*/}
          <div style={{ width: "206px", height: "206px" }}>
            {/*我的时间*/}
            <RightClickMenu menuItems={times}>
              <TimeLocal type={timeType} />
            </RightClickMenu>
          </div>
          {/*<div className="item">*/}
          {/*  <TimeLocal type="style4" />*/}
          {/*</div>*/}
          <div style={{ width: "206px", height: "206px" }}>
            {/*我的收藏*/}
            <RightClickMenu menuItems={MyCollections}>
              <MyCollection type={MyCollectionType} style={{ width: "200px", height: "200px" }} />
            </RightClickMenu>
          </div>
          {/*  <div className="item">
            <MyWork type="init" style={{ width: "200px", height: "200px" }} />
          </div>*/}
          {/* className="item"*/}
          <div style={{ width: "206px", height: "206px" }}>
            {/*我的工作*/}
            <RightClickMenu menuItems={MyWorks}>
              <MyWork type={MyWorksType} style={{ width: "200px", height: "200px" }} />
            </RightClickMenu>
          </div>
          <div style={{ width: "406px", height: "406px" }}>
            <TaskList />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Dashboard;
